<template>
  <view class="add-record-container">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="status-bar-placeholder" />
      <view class="navbar-decoration" />
      <view class="navbar-content">
        <view class="navbar-left" @click="goBack">
          <view class="back-btn">
            <wd-icon name="arrow-left" size="24rpx" color="#52c41a" />
            <text class="back-text">返回</text>
          </view>
        </view>
        <view class="navbar-center">
          <text class="page-title">新增记录</text>
        </view>
        <view class="navbar-right">
          <view class="save-btn" @click="submitRecord">
            <wd-icon name="check" size="24rpx" color="#52c41a" />
            <text class="save-text">保存</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 背景装饰 -->
    <view class="bg-decoration">
      <view class="bg-circle bg-circle-1" />
      <view class="bg-circle bg-circle-2" />
    </view>

    <!-- 内容区域 -->
    <scroll-view class="content-wrapper" scroll-y>
      <view class="form-container">
        <!-- 记录内容输入 -->
        <view class="form-card">
          <view class="card-header">
            <view class="header-icon">
              <wd-icon name="edit" size="24rpx" color="#52c41a" />
            </view>
            <text class="card-title">记录内容</text>
            <view class="required-mark">
              *
            </view>
          </view>
          <view class="card-content">
            <wd-textarea
              v-model="formData.content"
              class="content-textarea"
              placeholder="在这里记录你的想法、心情、生活片段..."
              :maxlength="500"
              :show-count="true"
              :auto-height="true"
              :min-height="180"
              clearable
            />
          </view>
        </view>

        <!-- 图片上传 -->
        <view class="form-card">
          <view class="card-header">
            <view class="header-icon">
              <wd-icon name="camera" size="24rpx" color="#52c41a" />
            </view>
            <text class="card-title">上传图片</text>
            <view class="optional-mark">
              可选
            </view>
          </view>
          <view class="card-content">
            <view class="image-upload-section">
              <!-- 已上传的图片 -->
              <view v-if="formData.images.length > 0" class="uploaded-images">
                <view
                  v-for="(image, index) in formData.images"
                  :key="index"
                  class="image-item"
                >
                  <image
                    class="image-preview"
                    :src="image"
                    mode="aspectFill"
                    @click="previewImage(index)"
                  />
                  <view class="image-remove" @click="removeImage(index)">
                    <wd-icon name="close" size="20rpx" color="white" />
                  </view>
                </view>
              </view>

              <!-- 上传按钮 -->
              <view
                v-if="formData.images.length < 9"
                class="upload-trigger"
                @click="chooseImage"
              >
                <view class="upload-icon">
                  <wd-icon name="add" size="40rpx" color="#52c41a" />
                </view>
                <text class="upload-text">添加图片</text>
                <text class="upload-tip">{{ formData.images.length }}/9</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 语音录制 -->
        <view class="form-card">
          <view class="card-header">
            <view class="header-icon">
              <wd-icon name="microphone" size="24rpx" color="#52c41a" />
            </view>
            <text class="card-title">语音记录</text>
            <view class="optional-mark">
              可选
            </view>
          </view>
          <view class="card-content">
            <view class="voice-record-section">
              <!-- 录音控制 -->
              <view class="record-controls">
                <view
                  class="record-button"
                  :class="{ recording: isRecording }"
                  @click="toggleRecording"
                >
                  <view class="record-icon">
                    <wd-icon
                      :name="isRecording ? 'pause' : 'microphone'"
                      size="32rpx"
                      color="white"
                    />
                  </view>
                  <text class="record-text">{{ isRecording ? '停止录音' : '开始录音' }}</text>
                </view>
                <text class="record-tip">{{ recordTip }}</text>
              </view>

              <!-- 语音预览 -->
              <view v-if="formData.voiceFile" class="voice-preview">
                <view class="voice-info">
                  <view class="voice-icon">
                    <wd-icon name="sound" size="28rpx" color="#52c41a" />
                  </view>
                  <text class="voice-duration">{{ formatDuration(recordDuration) }}</text>
                </view>
                <view class="voice-actions">
                  <view class="action-btn" @click="playVoice">
                    <wd-icon name="play" size="20rpx" color="#52c41a" />
                    <text class="action-text">播放</text>
                  </view>
                  <view class="action-btn" @click="deleteVoice">
                    <wd-icon name="delete" size="20rpx" color="#ff4d4f" />
                    <text class="action-text">删除</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部提交区域 -->
    <view class="submit-section">
      <view class="submit-decoration" />
      <wd-button
        class="submit-button"
        type="success"
        size="large"
        :loading="isSubmitting"
        round
        block
        @click="submitRecord"
      >
        <view class="submit-content">
          <wd-icon name="check" size="24rpx" color="white" />
          <text class="submit-text">{{ isSubmitting ? '提交中...' : '保存记录' }}</text>
        </view>
      </wd-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onUnmounted, reactive, ref } from 'vue'

// 页面配置
definePage({
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '新增记录',
  },
})

// 表单数据
const formData = reactive({
  content: '',
  images: [] as string[],
  voiceFile: '' as string,
})

// 表单验证规则
const rules = {
  content: [
    { required: true, message: '请输入记录内容' },
  ],
}

// 表单引用
const formRef = ref()

// 录音相关状态
const isRecording = ref(false)
const recordDuration = ref(0)
const recordTip = ref('点击开始录制语音')
const recorderManager = uni.getRecorderManager()
const innerAudioContext = uni.createInnerAudioContext()

// 提交状态
const isSubmitting = ref(false)

// 录音定时器
let recordTimer: any = null

// 返回上一页
function goBack() {
  uni.navigateBack()
}

// 选择图片
function chooseImage() {
  const remainingCount = 9 - formData.images.length

  // 检查是否还能上传更多图片
  if (remainingCount <= 0) {
    uni.showToast({
      title: '最多只能上传9张图片',
      icon: 'none',
    })
    return
  }

  uni.showActionSheet({
    itemList: ['从相册选择', '拍照'],
    success: (actionRes) => {
      let sourceType: ('album' | 'camera')[] = ['album', 'camera']
      if (actionRes.tapIndex === 0) {
        sourceType = ['album'] // 只从相册选择
      }
      else if (actionRes.tapIndex === 1) {
        sourceType = ['camera'] // 只使用相机
      }

      uni.chooseImage({
        count: remainingCount,
        sizeType: ['compressed'], // 压缩图片以节省空间
        sourceType,
        success: (res) => {
          console.log('选择图片成功:', res.tempFilePaths)
          formData.images = formData.images.concat(res.tempFilePaths)

          uni.showToast({
            title: `已添加${res.tempFilePaths.length}张图片`,
            icon: 'success',
            duration: 1500,
          })
        },
        fail: (err) => {
          console.error('选择图片失败:', err)
          uni.showToast({
            title: '选择图片失败，请重试',
            icon: 'none',
            duration: 2000,
          })
        },
      })
    },
    fail: () => {
      // 用户取消选择，不做处理
    },
  })
}

// 预览图片
function previewImage(index: number) {
  uni.previewImage({
    current: index,
    urls: formData.images,
  })
}

// 删除图片
function removeImage(index: number) {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除这张图片吗？',
    confirmText: '删除',
    cancelText: '取消',
    confirmColor: '#ff4d4f',
    success: (res) => {
      if (res.confirm) {
        formData.images.splice(index, 1)
        uni.showToast({
          title: '已删除',
          icon: 'success',
          duration: 1000,
        })
      }
    },
  })
}

// 开始录音
function startRecording() {
  // 检查权限
  uni.getSetting({
    success: (res) => {
      if (res.authSetting['scope.record'] === false) {
        uni.showModal({
          title: '需要录音权限',
          content: '请在设置中开启录音权限后再试',
          confirmText: '去设置',
          success: (modalRes) => {
            if (modalRes.confirm) {
              uni.openSetting()
            }
          },
        })
        return
      }

      // 开始录音
      recorderManager.start({
        duration: 60000, // 最长60秒
        sampleRate: 16000,
        numberOfChannels: 1,
        encodeBitRate: 48000,
        format: 'mp3',
      })

      isRecording.value = true
      recordDuration.value = 0
      recordTip.value = '正在录音中...点击停止'

      recordTimer = setInterval(() => {
        recordDuration.value += 1
        recordTip.value = `录音中 ${formatDuration(recordDuration.value)}/01:00`
      }, 1000)
    },
  })
}

// 停止录音
function stopRecording() {
  recorderManager.stop()
  isRecording.value = false
  recordTip.value = '录音完成'

  if (recordTimer) {
    clearInterval(recordTimer)
    recordTimer = null
  }
}

// 切换录音状态
function toggleRecording() {
  if (isRecording.value) {
    stopRecording()
  }
  else {
    startRecording()
  }
}

// 删除语音
function deleteVoice() {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除这段语音吗？',
    confirmText: '删除',
    cancelText: '取消',
    confirmColor: '#ff4d4f',
    success: (res) => {
      if (res.confirm) {
        formData.voiceFile = ''
        recordDuration.value = 0
        recordTip.value = '点击开始录制语音'
        uni.showToast({
          title: '已删除语音',
          icon: 'success',
          duration: 1000,
        })
      }
    },
  })
}

// 播放语音
function playVoice() {
  if (formData.voiceFile) {
    innerAudioContext.src = formData.voiceFile
    innerAudioContext.play()

    uni.showToast({
      title: '正在播放语音',
      icon: 'none',
      duration: 1000,
    })
  }
  else {
    uni.showToast({
      title: '没有可播放的语音',
      icon: 'none',
    })
  }
}

// 格式化录音时长
function formatDuration(seconds: number): string {
  const mins = Math.floor(seconds / 60)
  const secs = seconds % 60
  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
}

// 录音管理器事件
recorderManager.onStart(() => {
  console.log('recorder start')
})

recorderManager.onStop((res) => {
  console.log('recorder stop', res)
  formData.voiceFile = res.tempFilePath
  recordTip.value = `录制完成 ${formatDuration(recordDuration.value)}`
})

recorderManager.onError((err) => {
  console.error('录音错误:', err)
  isRecording.value = false
  recordTip.value = '录音失败，请重试'

  if (recordTimer) {
    clearInterval(recordTimer)
    recordTimer = null
  }

  uni.showToast({
    title: '录音失败',
    icon: 'none',
  })
})

// 提交记录
async function submitRecord() {
  try {
    // 检查记录内容
    if (!formData.content || !formData.content.trim()) {
      uni.showToast({
        title: '请输入记录内容',
        icon: 'none',
        duration: 2000,
      })
      return
    }

    if (formData.content.trim().length < 1) {
      uni.showToast({
        title: '记录内容不能为空',
        icon: 'none',
        duration: 2000,
      })
      return
    }

    isSubmitting.value = true

    // 构建提交数据
    const submitData = {
      content: formData.content.trim(),
      images: formData.images,
      voiceFile: formData.voiceFile,
      createTime: new Date().toISOString(),
      wordCount: formData.content.trim().length,
      imageCount: formData.images.length,
      hasVoice: !!formData.voiceFile,
    }

    console.log('提交数据:', submitData)

    // 模拟网络请求延时
    await new Promise(resolve => setTimeout(resolve, 1500))

    // 清空表单数据
    formData.content = ''
    formData.images = []
    formData.voiceFile = ''
    recordDuration.value = 0
    recordTip.value = '点击开始录制语音'

    uni.showToast({
      title: '记录添加成功',
      icon: 'success',
      duration: 2000,
    })

    // 返回首页并刷新
    setTimeout(() => {
      uni.navigateBack({
        delta: 1,
      })
    }, 2000)
  }
  catch (error) {
    console.error('提交失败:', error)

    let errorMessage = '提交失败，请重试'
    if (error && typeof error === 'object' && 'message' in error) {
      errorMessage = error.message as string
    }

    uni.showToast({
      title: errorMessage,
      icon: 'none',
      duration: 3000,
    })
  }
  finally {
    isSubmitting.value = false
  }
}

// 页面销毁时清理
onUnmounted(() => {
  if (recordTimer) {
    clearInterval(recordTimer)
  }
  if (isRecording.value) {
    recorderManager.stop()
  }
  innerAudioContext.destroy()
})
</script>

<style lang="scss" scoped>
.add-record-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8fffe 0%, #f0f9e8 25%, #e8f5e8 50%, #e1f2e1 75%, #daf1d8 100%);
  display: flex;
  flex-direction: column;
  position: relative;
  animation: containerFadeIn 0.8s ease-out;

  &::before {
    content: '';
    position: absolute;
    top: -100rpx;
    right: -50rpx;
    width: 300rpx;
    height: 300rpx;
    background: radial-gradient(circle, rgba(82, 196, 26, 0.12) 0%, rgba(82, 196, 26, 0.06) 40%, transparent 70%);
    pointer-events: none;
    animation: float 6s ease-in-out infinite;
  }

  &::after {
    content: '';
    position: absolute;
    bottom: -80rpx;
    left: -60rpx;
    width: 250rpx;
    height: 250rpx;
    background: radial-gradient(circle, rgba(52, 211, 153, 0.08) 0%, rgba(52, 211, 153, 0.04) 50%, transparent 70%);
    pointer-events: none;
    animation: float 8s ease-in-out infinite reverse;
  }
}

// 自定义导航栏
.custom-navbar {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 255, 254, 0.95));
  backdrop-filter: blur(30rpx);
  border-bottom: 1rpx solid rgba(82, 196, 26, 0.15);
  box-shadow: 0 2rpx 20rpx rgba(82, 196, 26, 0.08);
  z-index: 100;

  .status-bar-placeholder {
    height: var(--status-bar-height);
    background: inherit;
  }

  .navbar-decoration {
    position: absolute;
    top: var(--status-bar-height, 0);
    left: 0;
    right: 0;
    height: 2rpx;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(82, 196, 26, 0.3) 20%,
      rgba(82, 196, 26, 0.6) 50%,
      rgba(82, 196, 26, 0.3) 80%,
      transparent 100%
    );
  }

  .navbar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 88rpx;
    padding: 0 30rpx;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      bottom: -1rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 80rpx;
      height: 4rpx;
      background: linear-gradient(90deg, transparent, rgba(82, 196, 26, 0.8), transparent);
      border-radius: 2rpx;
      animation: shimmer 3s ease-in-out infinite;
    }

    .navbar-left {
      display: flex;
      align-items: center;
      flex: 1;

      .back-btn {
        display: flex;
        align-items: center;
        gap: 8rpx;
        padding: 12rpx 20rpx;
        border-radius: 25rpx;
        background: linear-gradient(135deg, rgba(82, 196, 26, 0.08), rgba(82, 196, 26, 0.04));
        border: 1rpx solid rgba(82, 196, 26, 0.15);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
          transition: left 0.6s ease;
        }

        &:active {
          background: linear-gradient(135deg, rgba(82, 196, 26, 0.15), rgba(82, 196, 26, 0.08));
          transform: scale(0.95);
          border-color: rgba(82, 196, 26, 0.2);

          &::before {
            left: 100%;
          }
        }

        .back-text {
          font-size: 26rpx;
          color: #2c3e50;
          font-weight: 600;
          letter-spacing: 0.5rpx;
        }
      }
    }

    .navbar-center {
      flex: 1;
      display: flex;
      justify-content: center;

      .page-title {
        font-size: 32rpx;
        font-weight: 800;
        color: #2c3e50;
        letter-spacing: 1.2rpx;
        background: linear-gradient(135deg, #2c3e50 0%, #52c41a 50%, #2c3e50 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .navbar-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex: 1;

      .save-btn {
        display: flex;
        align-items: center;
        gap: 8rpx;
        padding: 12rpx 20rpx;
        border-radius: 25rpx;
        background: linear-gradient(135deg, rgba(82, 196, 26, 0.08), rgba(82, 196, 26, 0.04));
        border: 1rpx solid rgba(82, 196, 26, 0.15);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
          transition: left 0.6s ease;
        }

        &:active {
          background: linear-gradient(135deg, rgba(82, 196, 26, 0.15), rgba(82, 196, 26, 0.08));
          transform: scale(0.95);
          border-color: rgba(82, 196, 26, 0.2);

          &::before {
            left: 100%;
          }
        }

        .save-text {
          font-size: 26rpx;
          color: #2c3e50;
          font-weight: 600;
          letter-spacing: 0.5rpx;
        }
      }
    }
  }
}

// 表单容器
.form-container {
  flex: 1;
  padding: 40rpx 30rpx 30rpx;
  position: relative;
}

.form-section {
  margin-bottom: 60rpx;
  animation: slideInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(0);

  &:nth-child(1) {
    animation-delay: 0.1s;
  }
  &:nth-child(2) {
    animation-delay: 0.25s;
  }
  &:nth-child(3) {
    animation-delay: 0.4s;
  }

  .section-title {
    font-size: 34rpx;
    font-weight: 800;
    background: linear-gradient(135deg, #2c3e50 0%, #52c41a 50%, #2c3e50 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 28rpx;
    position: relative;
    padding-left: 28rpx;
    letter-spacing: 1rpx;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 8rpx;
      height: 32rpx;
      background: linear-gradient(135deg, #52c41a 0%, #389e0d 40%, #237804 80%, #135200 100%);
      border-radius: 4rpx;
      box-shadow:
        0 3rpx 12rpx rgba(82, 196, 26, 0.4),
        inset 0 1rpx 0 rgba(255, 255, 255, 0.3);
      animation: titleGlow 3s ease-in-out infinite;
    }

    &::after {
      content: '';
      position: absolute;
      left: 10rpx;
      top: 50%;
      transform: translateY(-50%);
      width: 3rpx;
      height: 24rpx;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.3));
      border-radius: 1.5rpx;
    }
  }
}

// 表单项优化
:deep(.wd-form-item) {
  .wd-form-item__body {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 255, 254, 0.95));
    border-radius: 24rpx;
    border: 2rpx solid rgba(82, 196, 26, 0.18);
    box-shadow:
      0 6rpx 20rpx rgba(82, 196, 26, 0.12),
      0 2rpx 8rpx rgba(82, 196, 26, 0.06),
      inset 0 1rpx 0 rgba(255, 255, 255, 0.9),
      inset 0 -1rpx 0 rgba(82, 196, 26, 0.03);
    backdrop-filter: blur(20rpx);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(82, 196, 26, 0.03), transparent);
      transition: left 0.8s ease;
    }

    &:focus-within {
      border-color: rgba(82, 196, 26, 0.5);
      box-shadow:
        0 8rpx 32rpx rgba(82, 196, 26, 0.2),
        0 4rpx 16rpx rgba(82, 196, 26, 0.1),
        0 0 0 6rpx rgba(82, 196, 26, 0.08),
        inset 0 1rpx 0 rgba(255, 255, 255, 0.9);
      transform: translateY(-3rpx) scale(1.01);

      &::before {
        left: 100%;
      }
    }
  }
}

// 内容输入框
:deep(.content-textarea) {
  .wd-textarea__textarea {
    font-size: 30rpx;
    line-height: 1.8;
    color: #2c3e50;
    font-weight: 500;
    letter-spacing: 0.5rpx;

    &::placeholder {
      color: rgba(44, 62, 80, 0.4);
      font-weight: 400;
    }
  }

  .wd-textarea__count {
    color: rgba(82, 196, 26, 0.6);
    font-size: 24rpx;
    font-weight: 500;
  }
}

// 动画效果
@keyframes containerFadeIn {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(40rpx) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  33% {
    transform: translateY(-10rpx) rotate(1deg);
  }
  66% {
    transform: translateY(5rpx) rotate(-1deg);
  }
}

@keyframes shimmer {
  0%,
  100% {
    opacity: 0.6;
    transform: translateX(-50%) scaleX(1);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1.2);
  }
}

@keyframes titleGlow {
  0%,
  100% {
    box-shadow:
      0 3rpx 12rpx rgba(82, 196, 26, 0.4),
      inset 0 1rpx 0 rgba(255, 255, 255, 0.3);
  }
  50% {
    box-shadow:
      0 4rpx 16rpx rgba(82, 196, 26, 0.6),
      0 0 8rpx rgba(82, 196, 26, 0.3),
      inset 0 1rpx 0 rgba(255, 255, 255, 0.4);
  }
}

// 背景装饰
.bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;

  .bg-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(80rpx);
    opacity: 0.3;
    animation: float 8s ease-in-out infinite;

    &.bg-circle-1 {
      width: 400rpx;
      height: 400rpx;
      background: radial-gradient(circle, rgba(82, 196, 26, 0.2), transparent 70%);
      top: 20%;
      right: -100rpx;
      animation-delay: 0s;
    }

    &.bg-circle-2 {
      width: 300rpx;
      height: 300rpx;
      background: radial-gradient(circle, rgba(52, 211, 153, 0.15), transparent 70%);
      bottom: 30%;
      left: -80rpx;
      animation-delay: 4s;
    }
  }
}

// 内容包装器
.content-wrapper {
  flex: 1;
  padding: 20rpx 30rpx;
  position: relative;
  z-index: 1;
}

// 表单卡片
.form-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 255, 254, 0.95));
  border-radius: 32rpx;
  margin-bottom: 40rpx;
  border: 2rpx solid rgba(82, 196, 26, 0.12);
  box-shadow:
    0 8rpx 32rpx rgba(82, 196, 26, 0.08),
    0 4rpx 16rpx rgba(82, 196, 26, 0.04),
    inset 0 1rpx 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20rpx);
  position: relative;
  overflow: hidden;
  animation: slideInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2rpx;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(82, 196, 26, 0.3) 20%,
      rgba(82, 196, 26, 0.6) 50%,
      rgba(82, 196, 26, 0.3) 80%,
      transparent 100%
    );
  }

  &:nth-child(1) {
    animation-delay: 0.1s;
  }
  &:nth-child(2) {
    animation-delay: 0.25s;
  }
  &:nth-child(3) {
    animation-delay: 0.4s;
  }

  .card-header {
    display: flex;
    align-items: center;
    padding: 32rpx 32rpx 20rpx;
    gap: 16rpx;

    .header-icon {
      width: 48rpx;
      height: 48rpx;
      background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow:
        0 4rpx 12rpx rgba(82, 196, 26, 0.3),
        inset 0 1rpx 0 rgba(255, 255, 255, 0.3);
    }

    .card-title {
      font-size: 32rpx;
      font-weight: 700;
      color: #2c3e50;
      letter-spacing: 0.8rpx;
      flex: 1;
    }

    .required-mark {
      color: #ff4d4f;
      font-size: 28rpx;
      font-weight: bold;
    }

    .optional-mark {
      color: rgba(44, 62, 80, 0.5);
      font-size: 24rpx;
      background: rgba(82, 196, 26, 0.1);
      padding: 4rpx 12rpx;
      border-radius: 12rpx;
      border: 1rpx solid rgba(82, 196, 26, 0.2);
    }
  }

  .card-content {
    padding: 0 32rpx 32rpx;
  }
}

// 图片上传区域
.image-upload-section {
  .uploaded-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20rpx;
    margin-bottom: 20rpx;

    .image-item {
      position: relative;
      aspect-ratio: 1;
      border-radius: 16rpx;
      overflow: hidden;
      border: 2rpx solid rgba(82, 196, 26, 0.15);
      box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.1);

      .image-preview {
        width: 100%;
        height: 100%;
        border-radius: 14rpx;
      }

      .image-remove {
        position: absolute;
        top: -8rpx;
        right: -8rpx;
        width: 32rpx;
        height: 32rpx;
        background: #ff4d4f;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
        border: 2rpx solid white;
      }
    }
  }

  .upload-trigger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border: 3rpx dashed rgba(82, 196, 26, 0.3);
    border-radius: 16rpx;
    background: linear-gradient(135deg, rgba(82, 196, 26, 0.05), rgba(82, 196, 26, 0.02));
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(82, 196, 26, 0.1), transparent);
      transition: left 0.6s ease;
    }

    &:active {
      transform: scale(0.98);
      border-color: rgba(82, 196, 26, 0.5);
      background: linear-gradient(135deg, rgba(82, 196, 26, 0.1), rgba(82, 196, 26, 0.05));

      &::before {
        left: 100%;
      }
    }

    .upload-icon {
      width: 60rpx;
      height: 60rpx;
      background: linear-gradient(135deg, rgba(82, 196, 26, 0.15), rgba(82, 196, 26, 0.08));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16rpx;
      border: 2rpx solid rgba(82, 196, 26, 0.2);
    }

    .upload-text {
      font-size: 28rpx;
      color: #52c41a;
      font-weight: 600;
      margin-bottom: 8rpx;
    }

    .upload-tip {
      font-size: 24rpx;
      color: rgba(82, 196, 26, 0.6);
    }
  }
}

// 语音录制区域
.voice-record-section {
  .record-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 32rpx;

    .record-button {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16rpx;
      padding: 32rpx;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(82, 196, 26, 0.1), rgba(82, 196, 26, 0.05));
      border: 3rpx solid rgba(82, 196, 26, 0.2);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(82, 196, 26, 0.05), transparent);
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      &.recording {
        background: linear-gradient(135deg, #ff4d4f, #ff7875);
        border-color: #ff4d4f;
        animation: recordingPulse 1.5s ease-in-out infinite;

        &::before {
          opacity: 1;
          background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
        }
      }

      &:active {
        transform: scale(0.95);
      }

      .record-icon {
        width: 80rpx;
        height: 80rpx;
        background: linear-gradient(135deg, #52c41a, #389e0d);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
          0 6rpx 16rpx rgba(82, 196, 26, 0.3),
          inset 0 2rpx 0 rgba(255, 255, 255, 0.3);
      }

      &.recording .record-icon {
        background: linear-gradient(135deg, #ffffff, #f0f0f0);
      }

      .record-text {
        font-size: 28rpx;
        font-weight: 600;
        color: #2c3e50;
        text-align: center;
      }

      &.recording .record-text {
        color: white;
      }
    }

    .record-tip {
      font-size: 26rpx;
      color: rgba(44, 62, 80, 0.6);
      text-align: center;
      margin-top: 16rpx;
      padding: 8rpx 20rpx;
      background: rgba(82, 196, 26, 0.08);
      border-radius: 20rpx;
      border: 1rpx solid rgba(82, 196, 26, 0.15);
    }
  }

  .voice-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24rpx;
    background: linear-gradient(135deg, rgba(82, 196, 26, 0.08), rgba(82, 196, 26, 0.04));
    border-radius: 20rpx;
    border: 2rpx solid rgba(82, 196, 26, 0.15);

    .voice-info {
      display: flex;
      align-items: center;
      gap: 16rpx;

      .voice-icon {
        width: 48rpx;
        height: 48rpx;
        background: linear-gradient(135deg, #52c41a, #389e0d);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 3rpx 8rpx rgba(82, 196, 26, 0.2);
      }

      .voice-duration {
        font-size: 30rpx;
        font-weight: 600;
        color: #2c3e50;
        font-family: 'SF Mono', Monaco, monospace;
      }
    }

    .voice-actions {
      display: flex;
      gap: 24rpx;

      .action-btn {
        display: flex;
        align-items: center;
        gap: 8rpx;
        padding: 12rpx 20rpx;
        border-radius: 20rpx;
        background: rgba(255, 255, 255, 0.8);
        border: 1rpx solid rgba(82, 196, 26, 0.2);
        transition: all 0.3s ease;

        &:active {
          transform: scale(0.95);
          background: rgba(82, 196, 26, 0.1);
        }

        .action-text {
          font-size: 24rpx;
          font-weight: 500;
          color: #2c3e50;
        }
      }
    }
  }
}

// 底部提交区域
.submit-section {
  padding: 24rpx 30rpx;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 255, 254, 0.95));
  backdrop-filter: blur(30rpx);
  border-top: 1rpx solid rgba(82, 196, 26, 0.15);
  position: relative;
  z-index: 10;
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2rpx;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(82, 196, 26, 0.3) 20%,
      rgba(82, 196, 26, 0.6) 50%,
      rgba(82, 196, 26, 0.3) 80%,
      transparent 100%
    );
  }

  .submit-decoration {
    position: absolute;
    top: -20rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 80rpx;
    height: 8rpx;
    background: linear-gradient(90deg, transparent, rgba(82, 196, 26, 0.8), transparent);
    border-radius: 4rpx;
    animation: shimmer 3s ease-in-out infinite;
  }

  .submit-button {
    position: relative;
    overflow: hidden;
    box-shadow:
      0 8rpx 24rpx rgba(82, 196, 26, 0.3),
      0 4rpx 12rpx rgba(82, 196, 26, 0.15);
    transform: translateY(0);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
      transition: left 0.6s ease;
    }

    &:active {
      transform: translateY(2rpx) scale(0.98);
      box-shadow:
        0 4rpx 16rpx rgba(82, 196, 26, 0.25),
        0 2rpx 8rpx rgba(82, 196, 26, 0.12);

      &::before {
        left: 100%;
      }
    }

    .submit-content {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12rpx;

      .submit-text {
        font-size: 32rpx;
        font-weight: 700;
        letter-spacing: 1rpx;
      }
    }
  }
}

// 动画效果
@keyframes recordingPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 0 rgba(255, 77, 79, 0.4),
      0 4rpx 12rpx rgba(255, 77, 79, 0.2);
  }
  50% {
    box-shadow:
      0 0 0 20rpx rgba(255, 77, 79, 0),
      0 6rpx 20rpx rgba(255, 77, 79, 0.3);
  }
}

// 表单项样式覆盖
:deep(.wd-form-item) {
  margin-bottom: 0;

  .wd-form-item__body {
    padding: 24rpx;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;

    &:focus-within {
      background: transparent;
      border: none;
      box-shadow: none;
      transform: none;
    }
  }
}

:deep(.content-textarea) {
  .wd-textarea__inner {
    background: transparent;
    border: none;
    padding: 0;
  }

  .wd-textarea__textarea {
    font-size: 30rpx;
    line-height: 1.8;
    color: #2c3e50;
    font-weight: 500;
    letter-spacing: 0.5rpx;
    background: transparent;

    &::placeholder {
      color: rgba(44, 62, 80, 0.4);
      font-weight: 400;
    }
  }

  .wd-textarea__count {
    color: rgba(82, 196, 26, 0.6);
    font-size: 24rpx;
    font-weight: 500;
  }
}

// 响应式优化
@media screen and (max-width: 750rpx) {
  .uploaded-images {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .form-card .card-header .card-title {
    font-size: 28rpx;
  }

  .voice-preview {
    flex-direction: column;
    gap: 20rpx;
    align-items: flex-start;
  }
}
</style>
